<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
		<title>Ajax and Grid</title>
		<script type="text/javascript" src="dorado/boot.js"></script>
		<script type="text/javascript">$import("grid");</script>
		<script type="text/javascript">
			dorado.onInit(function() {
				var grid = new dorado.widget.Grid({
					renderTo: document.body,
					columns: [
						"*",
						"#",
						{ property: "product" },
						{ property: "manufacturer", width: 100 },
						{ $type: "Group", caption: "volumn",
							columns: [
								{ property: "length", width: 50 },
								{ property: "width", width: 50 },
								{ property: "height", width: 50 }
							]
						},
						{ property: "price" },
						{ property: "comment", width: 300 }
					]
				});
				
				new dorado.widget.Button({
					renderTo: "#buttonHolder",
					caption: "Load grid data via Ajax ...",
					onClick: function() {
						$ajax.request("data/phones.js", function(result) {
							grid.set("items", result.getJsonData());
						});
					}
				});
			});
		</script>
	</head>
	<body>
		<p id="buttonHolder"></p>
	</body>
</html>
